<template>
  <view class="content-body">
<!--    <view class="cu-bar bg-white margin-top-xs">-->
<!--      <view class="action sub-title">-->
<!--        <text class="text-xl text-bold text-shadow text-custom">商户列表</text>-->
<!--        <text class="text-ABC text-custom">SHOP</text>-->
<!--      </view>-->
<!--      <view class="action" >-->
<!--        <text class="text-lg text-yellow text-shadow" @tap="addShop">添加</text>-->
<!--      </view>-->
<!--    </view>-->
    <view class="cu-bar bg-white margin-top-xs">
<!--      <view class="action sub-title">-->
<!--        <text class="text-xl text-bold text-shadow text-custom">商户列表</text>-->
<!--        <text class="text-ABC text-custom">SHOP</text>-->
<!--      </view>-->
<!--      <view class="action" >-->
<!--        <text class="text-lg text-yellow text-shadow" @tap="addShop">添加</text>-->
<!--      </view>-->
      <view class="search-form">
        <text class="cuIcon-search"></text>
        <input type="text" v-model="searchTxt" placeholder="输入商户名称"
               confirm-type="search"/>
      </view>
      <view class="action">
        <button class="cu-btn text-white text-custom-bg"
                @tap.stop="searchMsgList">搜索</button>
      </view>
    </view>
<!--  <view class="content-body">-->
    <scroll-view scroll-y class="indexes">
    <view class="cu-list menu sm-border bg-gray">
      <shop-one-list v-for="(item,idx) in allShops" :shop="item"></shop-one-list>
      <view class="text-gray text-center" style="padding-top: 10px">~~我是有底线的~~</view>
    </view>
    </scroll-view>
  </view>
<!--    <view class="cu-list menu-avatar">-->
<!--      <view class="text-gray text-center" style="padding-top: 10px">~~我是有底线的~~</view>-->
<!--    </view>-->
<!--    <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">-->
<!--      <view class="cu-dialog">-->
<!--        <view class="cu-bar bg-white">-->
<!--          <view class="action text-green"></view>-->
<!--          <view class="action text-blue" @tap="hideModal">取消</view>-->
<!--        </view>-->
<!--        <view class="padding-sm">-->
<!--          <view class="cu-list menu text-left">-->
<!--            <view class="cu-item" v-for="(item,index) in allshopList" :key="index" @tap="checkData(item.id,item.poiName)">-->
<!--              <view class="content">-->
<!--                <view>{{item.poiName}}</view>-->
<!--                <view class="text-gray text-sm">{{item.address}}</view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--  </view>-->
</template>


<script setup lang="ts">
import {ref, onMounted, computed, reactive} from 'vue';
import {myShopList,toBeBindShop,bindShop} from '../../common/api/user'
import {useStore} from "../../common/store";
import ShopOneList from "../../components/ShopOneList.vue";
const store = useStore();
const userId = computed(() => store.userId)
const list = reactive([])

const searchTxt = ref('')

const allShops = ref([]);
const allshopList = ref([]);
const modalName = ref('');
const checkedValue = ref('')
const gotoShopInfo = (id) => {
  uni.navigateTo({url: `/pages/shop/shopInfo?id=${id}`})
}

const checkData = (id,name) => {
  uni.showModal({
    title: '提示',
    content: `确定要选择"${name}"吗？`,
    showCancel: true, // 显示取消按钮
    cancelText: '取消',
    confirmText: '确定',
    success: async (res) => {
      if (res.confirm) {
        let data = {}
        await bindShop(userId.value,id).then(res => {
          if (res.code == '200') {
            modalName.value = ''
            loadShopData(searchTxt.value)
          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

const addShop = async () => {
  await toBeBindShop().then(res => {
      if(res.code == '200') {
        console.log(res.data)
        allshopList.value = res.data
        modalName.value = 'bottomModal'
      }
  })
}
const hideModal = ()=> {
  modalName.value = ''
}

const loadShopData = async (_search: string) => {
  const id = userId.value ||0
  // const id = 1
  await myShopList({
    adminId: id,
    search: _search
  }).then(res => {
    if (res.code == 200) {
      allShops.value = res.data;
    }
  })
}

const searchMsgList = () => {
  loadShopData(searchTxt.value);
}

onMounted(()=>{
  loadShopData(searchTxt.value)
})
</script>

<style  lang="scss" scoped>
.content-body{
  background-color: #f0f0f0;
  color: #333333;
  height: 100vh;
}


.indexes {
  height: 90vh;
  //margin-top:120rpx;
}

</style>
